﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Easyui扩展库 选择框 - 落阳 整理</title>
    <link href="http://www.easyui-extlib.com/Content/Site.css" rel="stylesheet" />
    <script src="http://www.easyui-extlib.com/Scripts/jquery/jquery-1.11.0.min.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-extensions/jquery.jdirk.js"></script>
    <link href="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/themes/default/easyui.css" rel="stylesheet" />
    <link href="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/themes/icon.css" rel="stylesheet" />
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/selector/common/jeasyui.extensions.dialog.sealed.sample.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/base/jeasyui.extensions.base.isEasyUI.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/base/jeasyui.extensions.base.current.js"></script>
    <link href="http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/toolbar/jeasyui.extensions.toolbar.css" rel="stylesheet" />
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/toolbar/jeasyui.extensions.toolbar.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/selector/common/jeasyui.extensions.selector.base.js"></script>
    <link href="http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/selector/jeasyui.extensions.selector.css" rel="stylesheet" />
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/selector/jeasyui.extensions.selector.accordionDblDatagrid.js"></script>
    <link href="http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/base/jeasyui.extensions.base.css" rel="stylesheet" />
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/base/jeasyui.extensions.base.loading.js"></script>
    <script>
        $(function () {
            var single = true;

            $("#btn2").click(function () {
                $("#ID").textbox("setValue", "");
                $("#Name").textbox("setValue", "");
                single = $("[name='ss']:checked").val().toBoolean();
                $("#spanSingle").text(single ? "单选" : "多选");
            });

            function fill(data) {
                if (!data) { return; }
                if ($.isArray(data)) {
                    $("#ID").textbox("setValue", $.array.map(data, function (item) { return item.ID }).join(","));
                    $("#Name").textbox("setValue", $.array.map(data, function (item) { return item.RealName }).join(","));
                } else {
                    $("#ID").textbox("setValue", data.ID);
                    $("#Name").textbox("setValue", data.RealName);
                }
            }

            $("#btn1").click(function () {

                var selected = $("#ID").textbox("getValue");


                var btnId = "btn" + $.util.guid("N");
                var toolbar = [
                        { type: "label", options: { text: "姓名：" } },
                        {
                            type: "textbox", options: {
                                name: "realName", width: 120,
                                keydown: function (event, t) {
                                    if (event.keyCode == 13) {
                                        $(t).find("#" + btnId).click();
                                        event.preventDefault();
                                    }
                                }
                            }
                        },
                        {
                            type: "button", options: {
                                text: "查询", iconCls: "icon-search", id: btnId,
                                onclick: function (t) {
                                    // 当 datagrid 的 url 是本地 json 文件地址时，才需要指定搜索的回调函数；
                                    $.easyui.showSelector.helper.doSearch($(t), "AccordionDblDataGrid", null, function (params, dg) {
                                        $.getJSON("datagrid-selector-data.json", function (result) {
                                            dg.datagrid("loadData", ($.string.isNullOrWhiteSpace(params.realName) && !params.organId && !params.positionId) ? result : $.array.filter(result, function (item) {
                                                return item.RealName.contains(params.realName) && (!params.organId || (params.organId && item.OrganID == params.organId)) && (!params.positionId || (params.positionId && item.PositionID == params.positionId));
                                            }));
                                        });
                                    });
                                    // 如果 datagrid 的 url 是指向后台的 url 地址，则直接写成如下代码即可完成查询；
                                    //$.easyui.showSelector.helper.doSearch($(t), "AccordionDblDataGrid");
                                }
                            }
                        }
                ];


                var dia = $.easyui.showSelector.accordionDblDatagrid({
                    title: "测试选择",
                    width: 880,
                    height: 450,
                    onEnter: function (row) {
                        fill(row);
                    },
                    extToolbar: true,
                    selected: selected,
                    accordionOptions: {
                        width: 170,
                        panels: [
                            {
                                panelTitle: "按组织结构选择", type: "tree",
                                typeOptions: {
                                    url: "tree-selector-data.json",
                                    method: "get",
                                    // 如果触发 select 时，只需要 node.id 作为参数，则不需要指定 onSelectParamer，因为默认就是 return { nodeId: node.id };
                                    onSelectParamer: function (node) { return { organId: node.id }; },
                                    // 当 datagrid 的 url 是本地 json 文件地址时，才需要指定 onSelectQueryer 来手动筛选数据；
                                    // 如果 datagrid 的 url 是指向后台的 url 地址，不需要指定 onSelectQueryer 属性，会自动调用 datagrid.datagrid("load", params);
                                    onSelectQueryer: function (params, datagrid) {
                                        $.getJSON("datagrid-selector-data.json", function (data) {
                                            datagrid.datagrid("loadData", $.array.filter(data, function (item) { return item.OrganID == params.organId && (!params.realName || (item.RealName.contains(params.realName))); }));
                                        });
                                    }
                                }
                            },
                            {
                                panelTitle: "按岗位选择", type: "tree",
                                typeOptions: {
                                    url: "tree-selector-data1.json",
                                    method: "get",
                                    // 如果触发 select 时，只需要 node.id 作为参数，则不需要指定 onSelectParamer，因为默认就是 return { nodeId: node.id };
                                    onSelectParamer: function (node) { return { positionId: node.id }; },
                                    // 当 datagrid 的 url 是本地 json 文件地址时，才需要指定 onSelectQueryer 来手动筛选数据；
                                    // 如果 datagrid 的 url 是指向后台的 url 地址，不需要指定 onSelectQueryer 属性，会自动调用 datagrid.datagrid("load", params);
                                    onSelectQueryer: function (params, datagrid) {
                                        $.getJSON("datagrid-selector-data.json", function (data) {
                                            datagrid.datagrid("loadData", $.array.filter(data, function (item) { return item.PositionID == params.positionId && (!params.realName || (item.RealName.contains(params.realName))); }));
                                        });
                                    }
                                }
                            },
                            { panelTitle: "文本测试", type: "", typeOptions: "测试文本测试文本测试文本测试文本测试文本测试文本" },
                        ]
                    },
                    datagridOptions: {
                        singleSelect: single,
                        method: "get",
                        url: "datagrid-selector-data.json",
                        idField: 'ID',
                        columns: [[
                            { field: 'ID', title: '工号', width: 90 },
                            { field: 'RealName', title: '姓名', width: 90 }
                        ]],
                        toolbar: toolbar,
                        queryParams: { first: true },
                        onBeforeLoad: function (params) { return !params.first; },
                        selectedUrl: "datagrid-selector-data.json",
                        selectedMethod: "get",
                        // 当 selectedUrl 是本地 json 文件地址时，才需要指定 selectedFilter 来手动筛选数据；
                        // 如果 selectedUrl 是指向后台的 url 地址，不需要指定 selectedFilter 属性，因为不需要对 selectedUrl 返回的数据做二次处理；
                        selectedFilter: function (data, seled) { return $.array.filter(data, function (item) { return seled.contains(item.ID); }); }
                    }
                });
            });
        });
    </script>
</head>
<body>
    <div class="easyui-panel" data-options="fit:true,border:false,title:'本演示是完整版，支持扩展的toolbar插件'" style="padding:20px;">
        选中项的Value：<input type="text" id="ID" name="ID" class="easyui-textbox" data-options="width:350,multiline:true,height:40" />
        <br /><br />
        选中项的Text：<input type="text" id="Name" name="Name" class="easyui-textbox" data-options="width:350,multiline:true,height:40" />
        <br />
        <br />
        <div style="border:1px solid red;width:500px;height:80px;text-align:center;padding:4px;line-height:40px;">
            <input type="radio" id="ss1" name="ss" checked="checked" value="true" /><label for="ss1">单选</label>
            <input type="radio" id="ss2" name="ss" value="false" /><label for="ss2">多选</label>
            <span style="color:red;font-weight:bold;">单/多选设置，只有通过以下按钮设置后才有效。</span>
            <br />
            <a id="btn2" class="easyui-linkbutton" data-options="iconCls:'icon-add'">清空已选信息并设置选择框的单/多选</a>
        </div>
        <br />
        <a id="btn1" class="easyui-linkbutton" data-options="iconCls:'icon-add'">打开accordionDblDatagrid选择框</a>
        当前选择框为<span id="spanSingle" style="color:red;font-weight:bold;">单选</span>
    </div>
</body>
</html>
